<template>
	<view class="trend">
		<view class="switchBtn" @click="showDrawer">{{currChild.name}}<u-icon class="u-icon" size="16" name="arrow-down-fill"></u-icon></view>
		<view class="charts-box">
		  <qiun-data-charts
			v-if="!popShow"
			type="area"
			:chartData="chartData"
			:opts="area"
		  />
		</view>
		<u-popup ref="popup" v-model="popShow">
			<view class="childList-area">
				<view v-if="childList.length" class="childList">
					<u-cell-group>
						<u-cell-item v-for="(p, i) in childList" :key="i" @click="switchChild(p)">
							<view slot="title" class="u-cell-item-title">
								<view class="name">{{p.name}}</view>
								<view class="age">{{p.age}}岁</view>
								<view class="gradeClass">{{p.gradeClass}}年级</view>
							</view>
						</u-cell-item>
					</u-cell-group>
				</view>
				<view class="popup-submit">
					<u-button ripple type="primary" @click="addChild"><text class="iconfont">&#xe61a;</text>添加学生</u-button>
				</view>
			</view>
		</u-popup>
		<view class="u-tabs">
			<u-tabs active-color="#158766" :list="list" :current="currTab" @change="change"></u-tabs>
		</view>
		<view class="u-table">
			<u-table border-color="#f8f8f8" padding="20rpx 0">
				<u-tr class="u-tr">
					<u-td class="u-td">视力变化</u-td>
					<u-td class="u-td">{{plus(detail.vision.left)}}{{detail.vision.left}} 左眼</u-td>
					<u-td class="u-td">{{plus(detail.vision.right)}}{{detail.vision.right}} 右眼</u-td>
				</u-tr>
				<u-tr class="u-tr">
					<u-td class="u-td">屈光度变化</u-td>
					<u-td class="u-td">{{plus(detail.qgd.left)}}{{detail.qgd.left}} 左眼</u-td>
					<u-td class="u-td">{{plus(detail.qgd.right)}}{{detail.qgd.right}} 右眼</u-td>
				</u-tr>
			</u-table>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	
	export default {
		computed: {
			...mapState(['parentId'])
		},
		data() {
			return {
				detail: {
					vision: {
						left: 0,
						right: 0
					},
					qgd: {
						left: 0.5,
						right: -0.4
					}
				},
				currChild: {},
				tendency: [],
				parentChildren: {},
				list: [{
					name: '周'
				}, {
					name: '月'
				}, {
					name: '季'
				}, {
					name: '年'
				}],
				currTab: 0,
				swiperCurrent: 0,
				popShow: false,
				childList: [],
				chartData:{
				  categories:['暂无记录'],
				  series:[
					  { name: '左眼', data: [0], legendShape: 'diamond' },
					  { name: '右眼', data: [0], legendShape: 'diamond' }
				  ],
				},
				area: {
				    "type": "area",
				    "canvasId": "",
				    "canvas2d": false,
				    "background": "none",
				    "animation": true,
				    "timing": "easeOut",
				    "duration": 1000,
				    "color": [
				        "#158766",
				        "#feae4f"
				    ],
				    "padding": [
				        0,
				        0,
				        0,
				        0
				    ],
				    "rotate": false,
				    "errorReload": true,
				    "fontSize": 13,
				    "fontColor": "#666666",
				    "enableScroll": false,
				    "touchMoveLimit": 60,
				    "enableMarkLine": false,
				    "dataLabel": true,
				    "dataPointShape": true,
				    "dataPointShapeType": "solid",
				    "tapLegend": true,
				    "xAxis": {
				        "disabled": false,
				        "axisLine": true,
				        "axisLineColor": "#CCCCCC",
				        "calibration": false,
				        "fontColor": "#666666",
				        "fontSize": 13,
				        "rotateLabel": false,
				        "itemCount": 5,
				        "boundaryGap": "center",
				        "disableGrid": true,
				        "gridColor": "#CCCCCC",
				        "gridType": "solid",
				        "dashLength": 4,
				        "gridEval": 1,
				        "scrollShow": false,
				        "scrollAlign": "left",
				        "scrollColor": "#A6A6A6",
				        "scrollBackgroundColor": "#EFEBEF",
				        "format": ""
				    },
				    "yAxis": {
				        "disabled": false,
				        "disableGrid": false,
				        "splitNumber": 5,
				        "gridType": "dash",
				        "dashLength": 2,
				        "gridColor": "#CCCCCC",
				        "padding": 10,
				        "showTitle": false,
				        "data": []
				    },
				    "legend": {
				        "show": true,
				        "position": "top",
				        "float": "right",
				        "padding": 20,
				        "margin": 5,
				        "backgroundColor": "rgba(0,0,0,0)",
				        "borderColor": "rgba(0,0,0,0)",
				        "borderWidth": 0,
				        "fontSize": 13,
				        "fontColor": "#666666",
				        "lineHeight": 11,
				        "hiddenColor": "#CECECE",
				        "itemGap": 10,
				    },
				    "extra": {
				        "area": {
				            "type": "curve",
				            "opacity": 0.2,
				            "addLine": true,
				            "width": 2,
				            "gradient": true
				        },
				        "tooltip": {
				            "showBox": true,
				            "showArrow": true,
				            "showCategory": false,
				            "borderWidth": 0,
				            "borderRadius": 0,
				            "borderColor": "#000000",
				            "borderOpacity": 0.7,
				            "bgColor": "#000000",
				            "bgOpacity": 0.7,
				            "gridType": "solid",
				            "dashLength": 4,
				            "gridColor": "#CCCCCC",
				            "fontColor": "#FFFFFF",
				            "splitLine": true,
				            "horizentalLine": false,
				            "xAxisLabel": false,
				            "yAxisLabel": false,
				            "labelBgColor": "#FFFFFF",
				            "labelBgOpacity": 0.7,
				            "labelFontColor": "#666666"
				        },
				        "markLine": {
				            "type": "solid",
				            "dashLength": 4,
				            "data": []
				        }
				    }
				}
			}
		},
		onShow() {
			// 获取基本信息
			this.getInit()
		},
		methods: {
			plus(v) {
				return v < 0 ? '' : '+'
			},
			switchChild(row) {
				this.currChild = row
				this.getTendency()
				this.$refs.popup.close()
			},
			async getInit() {
				// 获取孩子列表
				const getChildList = await this.getChildList()
				this.childList = getChildList || []
				if (!this.childList.length) {
					this.$u.toast('暂未添加小孩')
					return
				}

				// 获取小孩视力分析
				let defaultStatusChild = this.childList.find(p => p.defaultStatus)
				defaultStatusChild = defaultStatusChild || this.childList[0]
				this.currChild = defaultStatusChild
				await this.getTendency()
			},
			getChildList() {
				return this.$http.post('/parent/child/list', {
					parentId: this.parentId
				}).then(res => res.data)
			},
			getTendency() {
				uni.showLoading({
					title: '获取学生视力分析'
				})
				return this.$http.post('/child/tendency', {
					parentChildrenId: this.currChild.id,
					tendencyType: this.currTab + 1
				}).then(res => {
					uni.hideLoading()
					
					res.data = res.data || []
					this.tendency = res.data
					if (this.tendency.length) {
						this.chartData.categories = this.tendency.map(p => this.$u.timeFormat(p.createTime, 'mm/dd'))
						this.chartData.series[0].data = this.tendency.map(p => p.leftVision)
						this.chartData.series[1].data = this.tendency.map(p => p.rightVision)
						// 对比
						this.detail.vision.left = Math.round((this.tendency[this.tendency.length - 1].leftVision - this.tendency[0].leftVision) * 10) / 10
						this.detail.vision.right = Math.round((this.tendency[this.tendency.length - 1].rightVision - this.tendency[0].rightVision) * 10) / 10
					} else {
						this.chartData.categories = ['暂无记录']
						this.chartData.series[0].data = [0]
						this.chartData.series[1].data = [0]
						this.detail.vision.left = 0
						this.detail.vision.right = 0
					}

					return
				})
			},
			change(idx) {
				this.currTab = idx
				this.getTendency(1, idx)
			},
			addChild() {
				uni.navigateTo({
					url: '/pages/addChild/addChild'
				})
			},
			showDrawer() {
			    this.popShow = true
			},
		}
	}
</script>

<style scoped lang="scss">
	.trend {
		position: relative;
		.charts-box {
		  width: 100%;
		  height:500rpx;
		  padding: 0 $uni-spacing-col-lg $uni-spacing-col-lg;
		  background: #fff;
		}
		.switchBtn {
			position: absolute;
			top: 40rpx;
			left: 0;
			z-index: 9;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 0 $uni-spacing-col-lg;
			font-size: 30rpx;
			font-weight: bold;
			.u-icon {
				margin-left: 15rpx;
			}
		}
		.u-tabs {
			margin: $uni-spacing-col-lg 0;
		}
	}
</style>
